<script setup>
import commonForm from '@/components/commonForm.vue';
import {
  addOrUpdateRoleAsync
} from '@/api/roleManagement';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  //回显角色数据信息
  roleInfo: {
    type: Object,
    default: {}
  }
})

const emit = defineEmits(['closeDialog', 'updateDialog'])

const handleClose = () => {
  emit('closeDialog')
}

const handleReset = () => {
  formRef.value.resetForm()
}

//保存/更新
const handleUpdate = () => {
  formRef.value.validForm(saveRoleInfo)
}

const saveRoleInfo = async () => {
  try {
    console.log('%c [  ]-41', 'font-size:13px; background:pink; color:#bf2c9f;', formData.value)
    const params = {
      ...formData.value
    }

    isUpdate.value && (params.id = props.roleInfo.id)

    const res = await addOrUpdateRoleAsync(params)
    if (res && res.code + '' === '200') {
      const tips = isUpdate.value ? '成功修改角色信息!' : '成功添加角色！'
      ElMessage.success(tips)
      emit('updateDialog')
    }

  } catch (error) {
    console.log('%c [ error ]-42', 'font-size:13px; background:pink; color:#bf2c9f;', error)
  }

}


const title = computed(() => !isUpdate.value ? '添加角色' : '更新角色')

const dialogVisible = computed(() => props.visible)


//表单配置项
const optionList = ref([
  {
    data: {
      label: '角色名称',
      prop: 'roleName',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入角色名称'
    }

  },
  {
    data: {
      label: '角色描述',
      prop: 'roleDesc',
    },
    component: 'el-input',
    $attrs: {
      placeholder: '请输入角色描述',
      type: 'textarea',
      row: 3
    }
  },
  {
    data: {
      label: '序号',
      prop: 'orderRank',
    },
    component: 'el-input-number',
    $attrs: {
      placeholder: '请输入排序的序号',
      type: 'number',
      min: 1,
      max: 99999,
      step: 1,
      'step-strictly': true
    }
  },
])

//表单回显数据
const optionData = computed(() => props.roleInfo)

//表单校验规则
const optionRuleList = ref({
  roleName: [
    {
      required: true,
      validator: (rule, value, callback) => {
        const regChZn = /^(?:[\u4e00-\u9fa5·]{2,16})$/
        const regEnglish = /(^[a-zA-Z][a-zA-Z\s]{0,20}[a-zA-Z]$)/
        if (!value) return callback(new Error('请输入角色名称！'))

        if (!regChZn.test(value) && !regEnglish.test(value)) {
          callback(new Error('角色名称应是中文名且长度2-16或英文名且0-20位'))
        } else {
          callback()
        }
      },
      trigger: 'blur'
    }
  ],
  roleDesc: [{ required: true, message: '请输入角色描述', trigger: 'blur' }],
  orderRank: [{ required: true, message: '请输入角色序号', trigger: 'blur' }],

})

//是更新角色？
const isUpdate = computed(() => Object.keys(props.roleInfo).length)

const formRef = ref(null)
const formData = ref({})

const updateFormData = (data) => {
  formData.value = data
}

</script>

<template>
  <div class="dialog-container">
    <el-dialog v-model="dialogVisible" :title="title" width="500" :before-close="handleClose" align-center
      :close-on-click-modal="false" :close-on-press-escape="false" :center="true" :destroy-on-close="true">
      <el-card>
        <commonForm ref="formRef" :optionList="optionList" :optionRuleList="optionRuleList" :optionData="optionData"
          @updateFormData="updateFormData">
        </commonForm>
      </el-card>

      <template #footer>
        <div class="dialog-footer">
          <el-button class="btn-blue" type="primary" @click="handleReset">
            重置
          </el-button>
          <el-button class="btn-green" type="primary" @click="handleUpdate">
            保存
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-button) {
  color: #fff;
  width: 100px;
  height: 35px;
  font-size: 16px;
  border-color: #c6c6c6;
}
</style>